<template>
  <el-container>
    <el-header class="searchBox" height="100px" style="padding: 8px">
      <el-form :inline="true">
        <el-row>
          <el-form-item label="医疗机构:" >
            <el-input v-model="searchList1.HospitalName" ></el-input>
          </el-form-item>
          <el-form-item label="签约日期：">
            <el-col :span="8">
              <el-date-picker v-model="searchList1.SignTime" type="date" placeholder="开始日期"  style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="8">
              <el-time-picker  v-model="searchList1.OverTime"   placeholder="结束日期"  style="width: 100%;"></el-time-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="签约状态:">
            <el-select  v-model="searchList1.Status" placeholder="签约状态">
              <el-option label="正常" value="1" ></el-option>
              <el-option label="禁用" value="2" ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="协议名称:">
            <el-input placeholder="协议名称" v-model="searchList1.TemplateName">
            </el-input>
          </el-form-item>
          <el-form-item label="患者姓名:">
            <el-input  v-model="searchList1.Name" placeholder="患者姓名">
            </el-input>
          </el-form-item>
          <el-form-item   label="住院号:">
            <el-input v-model="searchList1.PatientId" placeholder="住院号"></el-input>
          </el-form-item>
          <el-form-item >
            <el-button @click="getProtocol" >查询</el-button>
          </el-form-item>

        </el-row>
      </el-form>
    </el-header>
    <el-main>
      <el-table border :data="listPatient" >
        <el-table-column label="序号" prop="Id"></el-table-column>
        <el-table-column label="姓名" prop="Name"></el-table-column>
        <el-table-column label="身份证号" prop="IdCardNo"></el-table-column>
        <el-table-column label="医疗机构" prop="HospitalName"></el-table-column>
        <el-table-column label="协议名称" prop="TemplateName"></el-table-column>
        <el-table-column label="签约协议号" prop="TemplateId"></el-table-column>
        <el-table-column label="签约时间" prop="SignTime"></el-table-column>
        <el-table-column label="协议状态" prop="Status"></el-table-column>
        <el-table-column label="备注" prop="Remark"></el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <el-button type="text" size="mini" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button type="text" size="mini" @click="handleView(scope.$index, scope.row)">详情查询</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog :visible.sync="viewVisible"  top="10px" width="50%">
        <el-form  label-position="left"  style="position: relative;top: -15px" ref="form" :modal="searchList" >
          <el-row style="margin-bottom: 20px">
            <el-col :span="7" :gutter="10">
                    <span>
                        协议模板名称:&nbsp&nbsp{{searchList.TemplateName}}
                    </span>
            </el-col>
            <el-col :span="5">
                  <span>
                    类型：{{searchList.UserType}}
                  </span>
            </el-col>
          </el-row>
          <el-row style="margin: 35px 0 35px">
            <el-col >
              <quill-editor  v-model="searchList.Discription" @focus="focus($event)" :options="editorOption"></quill-editor>
            </el-col>
          </el-row>
          <el-row :gutter="30" >
            <el-col :span="6" >
              <el-form-item label-width="60px" label="签约人:">
                <el-input v-model="searchList.Name" :span="5"></el-input></el-form-item>
            </el-col>
            <el-col :span="9" >
              <el-form-item label-width="75px" label="签约时间:">
                <el-input v-model="searchList.SignTime"></el-input></el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20" style="margin-bottom: 20px">
            <el-col :span="3" >
              <el-checkbox label="有效"></el-checkbox>
            </el-col>
            <el-col :span="3">
              <el-checkbox label="有效"></el-checkbox>
            </el-col>
            <el-col :span="3">
              <el-checkbox label="有效"></el-checkbox>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label-width="60px" label="备注:">
                <el-input :autosize="{ minRows: 1, maxRows: 4}" v-model="searchList.Remark"  type="textarea"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="30" >
            <el-col :span="6" >
              <el-form-item label-width="60px" label="操作人:">
                <el-input v-model="searchList.CreateUserName" :span="5"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="9" >
              <el-form-item label-width="75px" label="操作时间:">
                <el-input v-model="searchList.CreateTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
                    <el-button type="primary" >打印</el-button>
                    <el-button type="primary" >导出</el-button>
                    <el-button type="primary" @click="viewVisible = false" >取消</el-button>
                    <el-button type="primary">保存</el-button>
                  </span>
      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import {DeleteSign, fetchAllPatientSigns, getPatientByCondition} from "../../../api/protocol";
import {quillEditor} from "vue-quill-editor";

const defaultList={
  pageSize:10,
  pageIndex:1,
  HospitalName:'',
  Status:'',
  SignTime:'',
  OverTime:'',
  TemplateName:'',
  CreateUserName:'',
  CreateTime:'',
  Name:'',
  PatientId:''
}

export default {
  name: "ProtocolListPatient",
  data(){
    return{
      listPatient:[],
      viewVisible: false,
      idx:-1,
      searchList1:Object.assign({},defaultList),
      searchList:Object.assign({},defaultList),
      editorOption: {
        placeholder: 'Hello World'
      }
    }
  },
  components: {
    quillEditor,
  },
  methods:{
    focus(event){
      event.enable(false);  //设置富文本编辑器不可编辑
    },
    handleDelete(index, row) {
      this.$confirm('是否要删除该签约协议?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
      this.idx = index;
      this.form = Object.assign({}, row)
      console.log(this.form)
      let para = {id: this.form.Id}
      DeleteSign(para).then(res=>{
        this.getAllNurseSigns()
      }).catch(err=>{
        console.log(err);
      })})
    },
    switchUserType(status){
      switch (status) {
        case 1:
          return '护士协议'
        case 2:
          return '患者协议'
      }
    },
    handleView(index, row) {
      this.idx = index;
      this.searchList = Object.assign({}, row)
      this.searchList.UserType = this.switchUserType(this.searchList.UserType)
      console.log(this.searchList)
      this.viewVisible = true;
    },
    switchStatus(status){
      switch (status) {
        case 1:
          return '正常'
        case 2:
          return '禁用'
      }
    },
    getAllPatientSigns(){
      fetchAllPatientSigns().then(res=>{
        this.listPatient=res.Result
        for(let i=0;i<res.Result.length;i++){
          this.listPatient[i].Status = this.switchStatus(this.listPatient[i].Status)
          console.log(this.listPatient[i].Status)
        }
        console.log('打印list：')
        console.log(this.listPatient)
      }) .catch(err=>{
         console.log(err);
       })

    },
    getProtocol(){
      if(this.searchList1.Status=='')
        this.searchList1.Status='-1'
      let para={jsonStr:JSON.stringify(this.searchList1)}
      // console.log(JSON.stringify(this.searchList))
      getPatientByCondition(para).then(res=>{
        this.listPatient=res.Result.data
        for(let i=0;i<this.listPatient.length;i++){
          this.listPatient[i].Status = this.switchStatus(this.listPatient[i].Status)
        }
      })

    },
  },
  created() {
    this.getAllPatientSigns()
  }
}
</script>

<style scoped>
.searchBox{
  border: 1px solid rgb(191, 203, 217);
}
.el-menu {
  background-color: #f0f0f0;
}
.el-menu-item {
  height: 40px;
  line-height: 40px;
}
</style>